Supongo que el problema es que es asíncrono e intenta leerlo antes de que se obtengan los datos, pero eso no debería suceder. Este código es el mismo que en todos los tutoriales. Pensé que useEffect y .then() están manejando esto. ¿Cuál es el problema aquí? En realidad, en los tutoriales acceden a los datos con categories.title directamente, sin siquiera usar categories[0] . Estoy confundido.

 import React, { useState, useEffect } from "react"; import { useOutletContext } from "react-router-dom"; import Birimler from "../../components/birimler"; import sanityClient from "../../Client"; const Yasambilim = () => { const { setTitle } = useOutletContext(); useState(() => { setTitle("YAŞAMBİLİM"); }, []); const [categories, setCategories] = useState([]); useEffect(() => { sanityClient .fetch( `*[_type == "article"]{ title, slug, }` ) .then((data) => setCategories(data)) .catch(console.error); }, []); console.log(categories); /* prints [{…}] */ console.log(categories[0]); /* prints {slug: {…}, title: 'Test Title'} */ console.log( categories[0].title ); /* app crashes Cannot read properties of undefined (reading 'title') */ return ( <> <Birimler /> </> ); }; export default Yasambilim;